<template>
  <el-dialog
    :title="textMap[dialogStatus]"
    width="600px"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="form"
      label-position="right"
      label-width="120px"
      v-loading="confirmLoading"
    >
      <el-form-item label="所属题库" prop="libId">
        <el-select
          v-model="form.libId"
          style="width: 100%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in qusLibList"
            :key="item.id"
            :label="item.libName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio label="choice">单选</el-radio>
          <el-radio label="judge">判断</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="题目" prop="question">
        <el-input
          placeholder="请输入题目名称"
          v-model="form.question"
        ></el-input>
      </el-form-item>
      <template v-if="form.type == 'choice'">
        <el-divider>选项设置</el-divider>
        <el-form-item prop="question">
          <el-button type="primary" @click="addOption">新增选项</el-button>
        </el-form-item>
        <el-form-item
          v-for="(item, index) in form.options"
          :label="'选项' + (index + 1)"
          :key="index"
          :prop="'options.' + index + '.value'"
          :rules="{
            required: true,
            message: '选项不能为空',
            trigger: 'blur'
          }"
        >
          <el-col :span="20">
            <el-input v-model="item.value"></el-input>
          </el-col>
          <el-col :span="4">
            <el-button
              style="margin-left: 10px"
              @click.prevent="removeOption(item)"
              >删除</el-button
            >
          </el-col>
        </el-form-item>
      </template>
      <el-form-item label="答案" prop="answer" v-show="form.type == 'choice'">
        <el-radio-group v-model="form.answer">
          <el-radio
            v-for="(item, index) in form.options"
            :label="item.value"
            :key="index"
            >选项{{ index + 1 }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="答案" prop="answer" v-show="form.type == 'judge'">
        <el-radio-group v-model="form.answer">
          <el-radio label="正确">正确</el-radio>
          <el-radio label="错误">错误</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">
        取消
      </el-button>
      <el-button type="primary" @click="submitForm">
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import formMixin from "@/mixins/form";
import request from "@/utils/request";
export default {
  name: "Dialog",
  mixins: [formMixin],
  components: {},
  data() {
    const propTypeList = [
      { name: "法律法规", value: "LEGISLATION" },
      { name: "安全管理", value: "SECURITY" },
      { name: "土建综合安全技术", value: "CONSTRUCTION" },
      { name: "机械设备安全技术 ", value: "MACHINERY" }
    ];
    return {
      textMap: {
        update: "修改题目",
        create: "新增题目"
      },
      tipMap: {
        update: "修改成功",
        create: "新增成功"
      },
      rules: {
        type: [
          {
            required: true,
            message: "请选择所属题库",
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择题目类型",
            trigger: "blur"
          }
        ],
        propType: [
          {
            required: true,
            message: "请选择考题所属类型",
            trigger: "change"
          }
        ],
        question: [
          {
            required: true,
            message: "请选择题目名称",
            trigger: "blur"
          }
        ],
        answer: [
          {
            required: true,
            message: "请选择答案",
            trigger: "blur"
          }
        ]
      },
      Urls: {
        addUrl: "/api/question/insert",
        editUrl: "/api/question/update/",
        getByIdUrl: "/api/question/get/",
        qusLibListUrl: "/api/question/lib/list"
      },
      propTypeList,
      qusLibList: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    beforeOpen() {
      this.getQusLibList();
    },
    // 获取题库
    getQusLibList() {
      request({
        url: this.Urls.qusLibListUrl,
        method: "get"
      })
        .then(res => {
          console.log("form list", res);
          if (res.code == 0) {
            this.qusLibList = res.data.records || [];
          } else {
            that.$notify({
              title: "提示",
              message: res.msg,
              type: "error",
              duration: 2000
            });
          }
        })
        .catch(err => {
          that.dialogFormVisible = false;
        });
    },
    addOption() {
      this.form.options.push({
        value: ""
      });
    },
    removeOption(item) {
      var index = this.form.options.indexOf(item);
      if (index !== -1) {
        this.form.options.splice(index, 1);
      }
    },
    resetForm() {
      this.form = {
        type: "choice",
        options: [{ value: "" }, { value: "" }, { value: "" }, { value: "" }]
      };
    },
    fillForm(data) {
      let options = data.options.split(";");
      this.form.options = options.map(item => {
        return { value: item };
      });
    },
    formatData(data) {
      let form = Object.assign({}, data);
      let arr = this.form.options,
        names = [];
      for (let i = 0; i < arr.length; i++) {
        names.push(arr[i].value);
      }
      form.options = names.join(";");
      return form;
    }
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style lang="scss" scoped></style>
